<template>
  <div class="steper-container">
    <mu-stepper :active-step="activeStep">
      <mu-step v-for="(step, index) in steps" :key="step.title">
        <mu-step-button @click="changeStep(index)">
          {{ step.title }}
        </mu-step-button>
      </mu-step>
    </mu-stepper>
    <mu-divider></mu-divider>
    <p class="content">{{ steps[activeStep].content }}</p>
    <mu-divider></mu-divider>
  </div>
</template>

<script>
export default {
  props: {
    activeStep: {
      type: Number,
      value: 0,
    },
    steps: {
      type: Array,
      value: [],
    },
  },
  data() {
    return {};
  },
  watch: {
    activeStep() {
      this.$emit("finish", this.activeStep === this.steps.length);
      window.scrollTo({ top: 0, behavior: "smooth" });
    },
  },
  methods: {
    changeStep(index) {
      this.$emit("changeStep", index);
    },
  },
};
</script>

<style scoped>
.steper-container {
  max-width: 380px;
  max-height: 400px;
  margin: auto;
}

.content {
  margin: 0.5em;
  text-align: center;
  color: rgb(121, 187, 255);
}

.step-button {
  margin-top: 12px;
  margin-right: 12px;
}
</style>
